<template>
	<div id="a">
		<div id="G2">

		</div>
		<div class="fensug">
			<div class="wavenum "><b id="denfenjs">0%</b><tt>2018 Q1</tt></div>
			<div class="waven">
				<div class="wave">&nbsp;</div>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'info',
		data: function() {
			return {
				data: [{
					year: '1951 年',
					sales: 38
				}, {
					year: '1952 年',
					sales: 52
				}, {
					year: '1956 年',
					sales: 61
				}, {
					year: '1957 年',
					sales: 145
				}, {
					year: '1958 年',
					sales: 48
				}, {
					year: '1959 年',
					sales: 38
				}, {
					year: '1960 年',
					sales: 38
				}, {
					year: '1962 年',
					sales: 38
				}]
			}
		},
		created: function() {

		}, // 创建时
		beforeMount: function() {}, // 挂载之前
		mounted: function() {
//			var chart = new G2.Chart({
//				container: 'G2',
//				forceFit: true,
//				height: 400
//			});
//			chart.source(this.data);
//			chart.scale('sales', {
//				tickInterval: 20
//			});
//			chart.interval().position('year*sales');
//			chart.render();
//
//			var waveHeight = 0;
//			var waveNum = 78;
//
//			function waves() {
//				if(waveHeight < waveNum) {
//
//					document.querySelector(".wave").style.height = waveHeight + "%"
//					waveHeight++;
//				}
//				setTimeout(function() {
//					waves()
//				}, 15);
//			}
//
//			document.querySelector("#denfenjs").innerHTML = waveNum + "%"
//			waves();
//


		}, // 挂载之后
		beforeUpdate: function() {}, // 数据更新时调用,在渲染之前
		updated: function() {}, // 数据更新后,渲染后调用(禁止)
		beforeDestroy: function() {}, // 实例销毁前调用,解绑中间层的数据传输
		destroyed: function() {}, // 实例销毁后调用
		watch: {}
	}
</script>

<style lang='scss'>
	#a{
		background: #fff;
	}

.fensug{ width:168px; height:168px; background:#fff; border:9px #5576ac solid; margin:100px auto; padding:5px;-webkit-border-radius:25em;
-moz-border-radius:25em;
border-radius:25em; overflow:hidden; position:relative}
.fensug .wavenum{width:168px;height:168px;overflow:hidden;-webkit-border-radius:50%;border-radius:50%;text-align:center;display:table-cell;vertical-align:middle; position:absolute; left:5px; top:5px; z-index:5;  display:flex; align-items:center; justify-content:center;flex-direction:column; }
.fensug .wavenum b{ color:#fff; font-size:43px; text-align:center; display:block; position:relative; z-index:2; line-height:45px;}
.fensug .wavenum tt{ color:#fff; font-size:20px; text-align:center; display:block;position:relative; z-index:2; font-weight:bold; width:140px; border-top:2px #fff solid; margin:3px auto; line-height:35px;}



.waven{ width:168px; height:168px; webkit-border-radius:25em;
-moz-border-radius:25em;
border-radius:25em;background:#5576ac; overflow:hidden; position:relative}

.wave {width:408px;height: 80%; position:absolute; left:0px; bottom:0; background: url(../assets/img/wave.png) no-repeat;animation: move_wave 1s linear infinite; -webkit-animation: move_wave 1s linear infinite;}



@-webkit-keyframes move_wave {
    0% {
        -webkit-transform: translateX(0)
    }
    50% {
        -webkit-transform: translateX(-25%)
    }
    100% {
        -webkit-transform: translateX(-50%)
    }
}

@keyframes move_wave {
    0% {
        transform: translateX(0)
    }
    50% {
        transform: translateX(-25%)
    }
    100% {
        transform: translateX(-50%)
    }
}
</style>
